<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{ */
            /* width: 100px; */
            /* height: 100px; */
            /* background-image: linear-gradient(to right bottom,red,pink,cyan); */
            /* 边框 width style color*/
            /* border: 5px solid orange; */
            /* border-top-style:dashed ; */
            /* 内边框 */
            /* 上下左右内边距为10px */
            /* padding: 10px; */
            /* 上下内边距为10px 左右内边距为20px */
            /* padding：10px 20px; */
            /* 上内边距为10px 左右内边距为20px 下内边距为30px */
            /* padding: 10px 20px 30px; */
            /*  */
            /* padding: 10px 20px 30px 40px; */
    /* } */

        div{
            /* 设置盒模型 */
            /* 元素默认都是内容盒子 */
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            border: 3px solid red;
            margin: 17px 34px  26px ;
            padding: 23px 19px 27px;
        }
        .border{
            /* 设置边框盒子 */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 2px solid pink;
            margin: 17px 29px 36px;
            padding: 15px 43px 21px;

        }
        /* 盒模型：
             盒子种类:
               1.内容盒子 标准盒子 w3c盒子
                 盒子计算公式：
                   盒子宽：144px 内容区width + 左右内边距19*2 +左右边框6
                   盒子高：156px 内容区height+上下内边距23+27+上下边距6
                   盒子所占面宽：212px 盒子宽144+左右外边距34*2
                   盒子所占面高：199px 盒子高156+上下外边距17+26

               2.边框盒子 怪异盒子 ie盒子
                   盒子宽：100px=内容区width（10px)+左右内边距43*2+左右边框4
                   盒子高：100px=内容区width（60px)+上下内边距15+21+上下边框4
                   盒子所占面宽：158px=盒子宽100+左右外边距29*2
                   盒子所占面高：153px=盒子高100+上下外边距17+36
            盒子区别？
              width和height区别
              内容盒子width和height是设置给内容区 边框盒子width和height是设置给盒子本身的
         */

    </style>
</head>
<body>
    <div>内容盒子</div>
    <div class="border">边框盒子</div>
</body>
</html>